<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.13作业</title>
    <!-- 点击标题，切换内容 -->
    <style>
        .all{
            margin: auto;
            border: 1px solid #000;
            width: 300px;
            height: 300px;
            .title{
                text-align: center;
                display: flex;
                height: 30px;
                .t1, .t2, .t3{
                    width: 100px;
                    line-height: 30px;
                }
                .t1{
                    background-color: aqua;
                }
            }
            .con1{
                background-color: aqua;
                height: 270px;
            }
            .con2, .con3{
                background-color: aqua;
                height: 270px;
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="title">
            <div class="t1">标题一</div>
            <div class="t2">标题二</div>
            <div class="t3">标题三</div>
        </div>
        <div class="con1">内容一</div>
        <div class="con2">内容二</div>
        <div class="con3">内容三</div>
    </div>
</body>
<script>
    let t1=document.querySelector('.t1');
    let t2=document.querySelector('.t2');
    let t3=document.querySelector('.t3');
    let con1=document.querySelector('.con1');
    let con2=document.querySelector('.con2');
    let con3=document.querySelector('.con3');
    t1.onclick=function(){
        con2.style.display=con3.style.display="none";
        con1.style.display="block";
        t1.style['background-color']='aqua'
        t3.style['background-color']=t2.style['background-color']='white'
    }
    t2.onclick=function(){
        con1.style.display=con3.style.display="none";
        con2.style.display="block";
        t2.style['background-color']='aqua'
        t3.style['background-color']=t1.style['background-color']='white'
    }
    t3.onclick=function(){
        con1.style.display=con2.style.display="none";
        con3.style.display="block";
        t3.style['background-color']='aqua'
        t2.style['background-color']=t1.style['background-color']='white'
    }
</script>
</html>